<template>
    <div id="movies">
        <md-tabs :md-theme="'bottom-bar-blue'" @md-changed="checkNewPosts" class="md-primary" md-alignment="fixed">
            <md-tab id="top250" md-label="TOP250"></md-tab>
            <md-tab id="in_theaters" md-label="正在上映"></md-tab>
            <md-tab id="coming_soon" md-label="即将上映"></md-tab>
        </md-tabs>
        <md-content class="md-scrollbar">
            <md-list class="md-triple-line">
                <md-list-item @click="getById(item.id)" :key="item.id" v-for="item in movies">
                    <md-avatar>
                    <img :src="item.images.medium" alt="People">
                    </md-avatar>
                    <div class="md-list-item-text">
                        <div>{{item.title}}</div>
                        <span>导演：{{item.directors[0].name}}</span>
                        <span>主演：{{item.casts[0].name}}、{{item.casts[1].name}}</span>
                        <span><span :key="it" v-for="it in item.genres" class="genres">{{it}}</span></span>
                        <span class="rating">{{item.rating.average}}</span>
                    </div>
                </md-list-item>
            </md-list>
        </md-content>
    </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "movies",
  data() {
    return {};
  },
  mounted() {
    this.getMovies({ type: "top250" });
  },
  computed: {
    // 从vuex的state中取出新闻的数据
    ...mapState({
      movies: state => state.movies
    })
  },
  methods: {
    // 直接触发新闻的action
    ...mapActions({
      getMovies: "GET_MOVIES"
    }),
    checkNewPosts(activeTab) {
      this.getMovies({ type: activeTab });
    },
    getById(mId) {
      localStorage.setItem("mId",mId);
      this.$store.commit('SET_MOVIESID',{mId:mId});
      this.$router.push("mDetail");
    }
  }
};
</script>
<style lang="scss" scoped>
@import "~vue-material/dist/theme/engine";
@include md-register-theme(
  "bottom-bar-blue",
  (
    primary: md-get-palette-color(blue, A200),
    accent: md-get-palette-color(red, A200)
  )
);
@import "~vue-material/dist/theme/all";
</style>
<style lang="less" scoped>
@import "../styles/var";
.md-scrollbar {
  .md-list-item {
    .md-avatar {
      border-radius: 0;
      width: 50px;
      height: 60px;
    }
    .md-list-item-text {
      div {
        font-size: @mediumSize;
        font-weight: bold;
      }
      span {
        font-size: @smallSize;
        padding: 2px;
      }
      .genres {
        width: auto;
        border: 1px solid #ee6aa7;
        color: #ee6aa7;
        font-size: @smallestSize;
        padding: 0 4px;
        margin-top: 2px;
        margin-right: 2px;
      }
      .rating {
        width: auto;
        position: absolute;
        right: 20px;
        font-size: @mediumSize;
        color: @rating;
      }
    }
  }
}

@media screen and (max-width: 414px) {
  .md-scrollbar {
    max-height: 570px;
    overflow: auto;
  }
}
@media screen and (max-width: 375px) {
  .md-scrollbar {
    max-height: 500px;
    overflow: auto;
  }
}
@media screen and (max-width: 320px) {
  .md-scrollbar {
    max-height: 400px;
    overflow: auto;
  }
}
</style>
